<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      :with-header="false"
      :width="700"
    >
      <div class="drawer_box">
        <div class="drawer_title">
          <div class="drawer_t">
            <div class="drawer_t_l">
              <img
                class="drawer_t_l_img"
                src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
                alt=""
              />
              查看合同权益
            </div>
            <img
              class="drawer_t_r"
              src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
              alt=""
              @click="drawer = false"
            />
          </div>
        </div>
        <div class="drawer_content">
          <div class="button_box">
            <img
              src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            <div class="button">基本信息</div>
          </div>
          <div class="block">
            <div
              style="position: absolute;height: 100%;display: flex;justify-content: space-between;width: 100%;overflow: hidden;"
            >
              <div class="drawer_content_left drawer_content_list">
                <div
                  class="line"
                  v-for="item in 50"
                  :style="{ top: item * 4.8 + 'rem' }"
                  :key="item"
                >
                  <div class="yuan"></div>
                  <div class="xian"></div>
                  <div class="yuan"></div>
                </div>
              </div>
              <div class="drawer_content_right drawer_content_list"></div>
            </div>
            <div class="text_content">
              <template>
                <div class="list_text">
                  <div class="list_text_left">合同编号:</div>
                  <div class="list_text_right">{{ messageList.Code }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合作模式:</div>
                  <div class="list_text_right">{{ messageList.TypeID }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">权益数量:</div>
                  <div class="list_text_right">
                    {{ messageList.ContractEquityCount }}
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合作企业:</div>
                  <div class="list_text_right">{{ messageList.CompanyName }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">上架平台:</div>
                  <div class="list_text_right">{{ messageList.Platform }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同签署时长(年):</div>
                  <div class="list_text_right">
                    {{ messageList.ServiceYears }}
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同开始日期:</div>
                  <div class="list_text_right">{{ messageList.StartTime }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同截止日期:</div>
                  <div class="list_text_right">{{ messageList.EndTime }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同附件:</div>
                  <div class="list_text_right" v-if="handleData">
                    <div
                      v-for="(item, index) in messageList.pdfUrl"
                      :key="index"
                    >
                      <div class="text-hetong" @click="openPdfView(item)">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">产品类型:</div>
                  <div class="list_text_right" v-if="tableData[0]">
                    {{ tableData[0].ProductType }}
                  </div>
                </div>

                <!-- <div class="list_text">
                                    <div class="list_text_left">产品名称:</div>
                                    <div class="list_text_right">{{ }}</div>
                                </div> -->
              </template>
            </div>
          </div>

          <div class="block_title">关联权益</div>

          <div class="block">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop=""
                label="序号"
                width="60"
                type="index"
                :index="getIndex"
              >
              </el-table-column>
              <el-table-column prop="ProductType" label="产品类型" width="180">
              </el-table-column>
              <el-table-column prop="ProductName" label="产品名称" width="200">
              </el-table-column>
              <el-table-column
                prop="Name"
                label="权益名称"
                width="200"
                color="red"
              >
                <template slot-scope="scope">
                  <div @click="open(scope.row)" class="table-name">
                    {{ scope.row.Name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="SalePrice"
                label="平台价格(元)"
                width="160"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="PlatformServiceRate"
                label="权益平台服务费"
                width="160"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.PlatformServiceRate * 100 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="EquityServiceRate"
                label="小程序服务费"
                width="160"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.EquityServiceRate * 100 }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="total > 0"
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="pdfView"
      direction="rtl"
      size="50%"
      :with-header="false"
      :width="700"
    >
      <div class="drawer_box2">
        <div class="drawer_t">
          <div class="drawer_t_l">
            文件预览
          </div>
          <img
            class="drawer_t_r"
            src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="pdfView = false"
          />
        </div>
        <iframe class="iframe" :src="docxUrl" frameborder="0"></iframe>
      </div>
    </el-drawer>
    <rights-detail
      :rightId="messageList.EquityID"
      :octopus="octopus"
      ref="rightsDetail"
    ></rights-detail>
  </div>
</template>

<script>
import rightsDetail from "./rightsDetail.vue";
export default {
  name: "look_dialog",
  components: {
    rightsDetail
  },
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      rightList: [],
      docxUrl: "",
      pdfView: false,
      list: {
        contract: {
          data: {
            id: 604, // 菜单表的八爪鱼ID
            cellData: [
              { name: "Address" }, // 使用地址
              { name: "CompanyID" }, // 公司id
              { name: "ContractID" }, // 合同ID
              { name: "CostPrice" }, // 平台价格
              { name: "CreateTime" }, // 创建时间
              { name: "CreateUserID" }, // 创建人ID
              { name: "Description" }, // Description
              { name: "EffectiveTime" }, // EffectiveTime
              { name: "EquityList" }, // EquityList
              { name: "EquityShelfTime" }, // EquityShelfTime
              { name: "ExpireTime" }, // Expiretime
              { name: "FlagList" }, // FlagList
              { name: "ID" }, // ID
              { name: "Integral" }, // Integral
              { name: "IsDetele" }, // IsDetele
              { name: "IsOpenSale" }, // IsOpenSale
              { name: "IsRealNameAuthentication" }, // IsRealNameAuthentication
              { name: "IsRefund" }, // IsRefund
              { name: "IsRefundAudit" }, // IsRefundAudit
              { name: "MainPicturePath" }, // MainPicturePath
              { name: "MinimumQuantity" }, // MinimumQuantity
              { name: "Name" }, // 报警区域
              { name: "PlatformShelfTime" }, // PlatformShelfTime
              { name: "ProductID" }, // ProductID
              { name: "SalePrice" }, // SalePrice
              { name: "SecondaryPicturePath" }, // SecondaryPicturePath
              { name: "Status" }, // Status
              { name: "TransferRuleID" }, // TransferRuleID
              { name: "TypeID" }, // TypeID
              { name: "UpdateTime" }, // UpdateTime
              { name: "UsersCount" }, // UsersCount
              { name: "UseRuleDescription" } // UseRuleDescription
            ]
          },
          configWidth: 30,
          showNumber: true
        }
      },
      tableData: [],
      total: 0,
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      handleData: false
    };
  },
  mounted() {
    // this.getData()
  },
  created() {},
  watch: {
    drawer(newMessage, oldMessage) {
      if (newMessage) {
        // this.getRightList()
        // this.getEquity(this.messageList.ID)
      }
      // 在这里可以执行其他操作
    },
    messageList(e) {
      this.messageList.pdfUrl = e.length > 0 ? JSON.parse(e.FilePath) : [];
    }
  },
  methods: {
    open(row) {
      // 展示权益详情
      this.$refs.rightsDetail.init(row.ID);
      this.$refs.rightsDetail.drawerOp(row.ID);
    },
    drawerOp() {
      this.drawer = true;
      this.handleData = true;
      this.getProduct(this.messageList.ID);
    },

    getProduct(id) {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 604,
          cellData: [
            { name: "ProductID" }, // 产品ID
            { name: "ProductName" }, // 产品名称
            { name: "ProductType" }, // 产品类型
            { name: "ID" }, // ID
            { name: "Name" }, // 报警区域
            { name: "SalePrice" }, // 市场价格
            { name: "PlatformServiceRate" }, // EquityServiceRate
            { name: "EquityServiceRate" } // EquityServiceRate
          ],
          paramData: {
            ContractID: id
          },
          pageData: {
            index: this.currentPage,
            rowSize: this.pageSize
          }
        },
        data => {
          if (data.status.code == 200) {
            this.tableData = data.content.queryData;
            this.total = data.content.pageData.totalRows;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    handleExceed() {
      this.octopus.error("最多上传1个。");
    },
    //报告预览
    openPdfView(item) {
      console.log(item, `${item.path}.pdf`);
      let _this = this;
      let file_path = item.path.substring(item.path.indexOf("upload") + 6);
      console.log(file_path, "999");
      let view_path =
        _this.octopus.config.url +
        "/Octopus/Engine/Viewer/" +
        item.name +
        "?" +
        "path=" +
        file_path +
        "&access_token=" +
        _this.octopus.passport.token;
      _this.pdfView = true;
      _this.docxUrl = view_path;
    },
    getEquity(id) {
      let _that = this;
      _that.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 602,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "ContractID" }, // 合同ID
            { name: "CostPrice" }, // CostPrice
            { name: "CreateTime" }, // CreateTime
            { name: "CreateUserID" }, // 创建人
            { name: "Description" }, // Description
            { name: "Description_EN" }, // Description_EN
            { name: "EquityServiceRate" }, // EquityServiceRate
            { name: "FlagList" }, // FlagList
            { name: "ID" }, // ID
            { name: "Name" }, // Name
            { name: "Name_EN" }, // Name_EN
            { name: "PlatformServiceRate" }, // PlatformServiceRate
            { name: "SalePrice" }, // SalePrice
            { name: "ThumbnailPath" }, // ThumbnailPath
            { name: "UpdateTime" } // UpdateTime
          ],
          paramData: {
            ID: id
          },
          pageData: {
            index: _that.currentPage,
            rowSize: _that.pageSize
          }
        },
        function(data) {
          if (data.status.code == 200) {
            _that.tableData = data.content.queryData;
            _that.total = data.content.pageData.totalRows;
          } else {
            _that.octopus.tips.error(data);
          }
        }
      );
    },
    getIndex(index) {
      return index + 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getEquity(this.messageList.ID);
      this.getProduct(this.messageList.ID);
    }
  }
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin: 1rem 0;
  display: flex;
  font-size: 2rem;
  font-weight: 700;
  align-items: center;
}

.button_box img {
  width: 24px;
  height: 24px;
}

.button_box .button {
  /* margin-right: .8rem;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    background-color: #fff;
    color: #F78C55;
    box-shadow: 0px 0px 7px 0px rgb(180 171 206 / 53%);
    border-radius: .8rem;
    cursor: pointer; */
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 5rem);
  padding: 0 3rem;
  /* display: flex; */
  width: 100%;
  /* justify-content: space-between; */
  padding-bottom: 1rem;
}

.drawer_content .block {
  position: relative;
  width: 100%;
  height: fit-content;
}

.drawer_content .block_title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.drawer_content_list {
  height: 100%;
  padding: 3rem;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4),
    inset 0px 0px 8px 0px rgba(247, 246, 250, 0.5),
    inset 0px 0px 4px 0px #eeecf4;
  width: 25.5%;
  top: 0;
}

.drawer_content_right {
  width: 73%;
  right: 0;
}

.drawer_content_list .name {
  line-height: 3rem;
}

.drawer_content_left {
  position: relative;
  background-color: #fdfdfd;
}

.drawer_content .line {
  position: absolute;
  display: flex;
  width: 5rem;
  justify-content: space-between;
  right: -3rem;
  border: none;
  z-index: 100;
}

.drawer_content .line .yuan {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #c6c6c9;
}

.drawer_content .line .xian {
  position: absolute;
  width: 4rem;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  height: 0.5rem;
  background-color: #c6c6c9;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}

.text_content {
  position: relative;
  z-index: 1000;
}

.text_content .list_text {
  display: flex;
  padding: 0 3rem;
  box-sizing: border-box;
  justify-content: space-between;
}

.text_content .list_text > div {
  font-size: 1.6rem;
  line-height: 6rem;
  border-bottom: 1px solid #e6e6e6;
}

.text_content .list_text .list_text_left {
  width: 19.5%;
}

.text_content .list_text .list_text_right {
  width: 71%;
}

.text_content .list_text .list_text_right img {
  width: 12rem;
  height: 12rem;
  margin-top: 1rem;
  margin-right: 0.6rem;
  margin-bottom: 1rem;
}

.list_text_right_table {
  margin-top: 1rem;
}

.list_text_right_table > div {
  display: flex;
  text-align: center;
  justify-content: space-between;
  box-sizing: border-box;
  line-height: 3rem;
  padding: 1rem 1.5rem;
}

.list_text_right_table .tr {
  color: #827070;
}

.list_text_right_table .tr:nth-of-type(odd) {
  background-color: #fdfbfa;
}

.drawer_content .list_title {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}

.text-hetong,
.table-name {
  color: #4791ff;
  cursor: pointer;
}

.popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.106);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  .box {
    width: 70vw;
    height: 90vh;
    background-color: #ffff;
    border-radius: 2rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 5%;
    overflow: hidden;

    .title {
      width: 100%;
      height: 6rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 2rem;
      border-bottom: 1px solid #dfdfdf;

      div {
        font-size: 2rem !important;
        line-height: 6rem;

        i {
          font-size: 3rem !important;
          line-height: 6rem;
          cursor: pointer;
        }
      }
    }

    iframe {
      width: 100%;
      height: calc(100% - 6rem);
    }

    embed {
      width: 100%;
      height: calc(100% - 6rem);
    }
  }
}

.drawer_box2 {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_box2 .drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_box2 .drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_box2 .drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_box2 .drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_box2 .drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fff;
}

.iframe {
  width: 100%;
  height: 100%;
}
</style>
